<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /* 全局样式 */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: Arial, sans-serif;
            background-color: #f9f9f9;
        }

        /* 顶部导航栏整体样式 */
        header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 10px 20px;
            background-color: white;
            border-bottom: 1px solid #0aa1ed;
        }

        /* 顶部导航栏 - 中间logo部分 */
        .center {
            display: flex;
            align-items: center;
        }

        .center img {
            height: 41px;
        }

        /* 顶部导航栏 - 中间搜索框部分 */
        .input {
            display: flex;
            align-items: center;
        }

        .input input {
            width: 374px;
            height: 35px;
            padding: 0 10px;
            margin-right: 10px;
            border: none;
            background-color: #f8f8f8;
        }

        .input img {
            height: 35px;
            width: 35px;
            background-color: #0aa1ed;
        }

        /* 顶部导航栏 - 右侧功能图标和链接部分 */
        .right {
            display: flex;
            align-items: center;
        }

        .right img {
            height: 30px;
            margin-right: 10px;
        }

        .right a {
            margin-left: 10px;
            text-decoration: none;
            color: #808080;
            font-size: 12px;
        }

        /* 导航菜单样式 */
        nav {
            background-color: #0aa1ed;
            padding: 10px;
        }

        nav a {
            color: white;
            text-decoration: none;
            margin-right: 20px;
        }

        /* 轮播图区域样式 */
        .banner {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 40px;
            background-color: rgba(0, 0, 0, 0.1);
            border-radius: 5px;
            margin: 20px;
        }

        .banner-text {
            width: 40%;
        }

        .banner-text h2,
        .banner-text h3 {
            margin-bottom: 10px;
        }

        .banner-text p {
            margin-bottom: 15px;
        }

        .banner-text button {
            padding: 10px 20px;
            background-color: #0aa1ed;
            border: none;
            color: white;
        }

        .banner img {
            width: 50%;
            height: auto;
        }

        /* 商品展示区样式 */
        .product-section {
            padding: 20px;
            text-align: center;
        }

        .product-item {
            display: inline-block;
            width: 45%;
            margin: 10px;
            text-align: left;
            border: 1px solid #ddd;
            padding: 10px;
        }

        .product-item img {
            width: 100%;
            height: auto;
        }

        .product-text {
            padding: 10px;
        }

        .product-text h3 {
            margin-bottom: 10px;
        }

        .product-text p {
            margin-bottom: 15px;
        }

        .product-text button {
            padding: 5px 10px;
            background-color: #0aa1ed;
            border: none;
            color: white;
        }

        /* 更多商品展示区样式 */
        /****************f2 CSS*****************/
        .f2{
            overflow: hidden;

        }
        /****************f2 左侧 CSS*****************/
        .f2>.left {
            width: 366px;
            height: 233px;
            background-color: #e8e8e8;
            margin-right: 20px;
            float: left;
        }
        .f2>.left>.tit{
            height: 35px;
            width: 366px;
            background-color: #0aa1ed;
            position: relative;
        }
        .f2>.left>.tit>span{
            font-family: simhei;
            color: #fff;
            left: 49px;
            top: 8px;
            position: absolute;
        }
        .f2>.left>.tit>img{
            width: 29px;
            height: 20px;
            left: 10px;
            top: 8px;
            position: absolute;
        }
        .f2>.left>.text{
            font-size: 12px;
            margin-left: 12px;
        }
        .f2>.left>.text>p{
            color: #62b5ec;
        }
        .f2>.left>.text>ul{
            overflow: hidden;
        }
        .f2>.left>.text>ul>li{
            float: left;
            margin-right: 10px;
            margin-top: 9px;
            margin-bottom: 17px;
        }
        .f2>.left>.text>ul>li>a{
            color: #0aa1ed;
        }
        /****************f2 card CSS*****************/
        .f2>.card{
            width: 198px;
            height: 233px;
            background-color: #e8e8e8;
            float: left;
            margin-right: 8px;
            text-align: center;
        }
        .f2>.card>img{
            width: 100%;
        }
        .f2>.card>.text>.p_intro{
            font-size: 12px;
            color: #000;
            font-weight: lighter;
        }
        .f2>.card>.text>.p_price{
            font-size: 24px;
            color: #0aa1ed;
            font-weight: bold;
            margin-top: 6px;
        }
        .f2>.card>.text>a{
            font-size: 12px;
            color: #fff;
            font-weight: lighter;
            background-color: #0aa1ed;
            width: 100px;
            height: 24px;
            margin-top: 6px;
        }
        /****************f2 card3 CSS*****************/
        .f2>.card3{
            margin-right: 0;
        }

        /* 底部功能图标区域样式 */
        .bottom-features {
            display: flex;
            justify-content: space-around;
            padding: 20px;
            background-color: white;
            border-bottom: 1px solid #e8e8e8;
        }

        .feature-item {
            text-align: center;
        }

        .feature-item img {
            height: 50px;
            margin-bottom: 5px;
        }

        .feature-item p {
            font-size: 14px;
            color: #333;
        }

        /* 底部版权信息区域样式 */
        footer {
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
            padding: 20px;
            background-color: white;
        }

        .logo-area {
            width: 20%;
            text-align: center;
        }

        .logo-area img {
            height: 50px;
            margin-bottom: 10px;
        }

        .logo-area p {
            font-size: 12px;
            color: #808080;
        }

        .centerlist-area {
            width: 40%;
        }

        .centerlist-area ul {
            list-style-type: none;
        }

        .centerlist-area ul li {
            margin-bottom: 5px;
        }

        .centerlist-area ul li a {
            text-decoration: none;
            color: #333;
            font-size: 12px;
        }

        .right-area {
            width: 20%;
            display: flex;
            justify-content: space-between;
        }

        .right-area img {
            height: 50px;
        }

        .copyright {
            width: 100%;
            text-align: center;
            font-size: 12px;
            color: #333;
            margin-top: 10px;
        }
        table {
            border-collapse: collapse;
            width: 100%;
            font-size: 12px;
            color: #333;
        }

        th {
            padding: 10px 20px;
            text-align: left;
            font-size: 14px;
        }

        td {
            padding: 5px 20px;
            text-align: left;
        }
    </style>
</head>
<body>
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="styles.css">
    <title>Tedu.cn页面样式</title>
</head>

<body>
<!-- 顶部导航栏 -->
<header>
    <div class="center">
        <img src="img/header/logo.png" alt="Tedu.cn">
    </div>
    <div class="input">
        <input type="text" placeholder="请输入您要搜索的内容">
        <img src="img/header/search.png" alt="搜索图标">
    </div>
    <div class="right">
        <img src="img/header/care.png" alt="收藏图标">
        <img src="img/header/order.png" alt="消息图标">
        <img src="img/header/shop_car.png" alt="购物车图标">
        <a href="#">帮助</a>
        <a href="#">登录</a>
    </div>
</header>
<nav>
    <a href="#">首页</a>
    <a href="#">电脑办公</a>
    <a href="#">办公文具</a>
</nav>

<!-- 轮播图区域 -->
<div class="banner">
    <div class="banner-text">
        <h2>经典设计传承</h2>
        <h3>小新经典310上市</h3>
        <p>抢购时间: 12.09 00:00 - 12.24 24:00</p>
        <p>购买用户赠送一年延保</p>
        <p>抢购价: ¥4899.00</p>
        <button>立即抢购</button>
    </div>
    <img src="img/carousel/banner1.png" alt="小新经典310">
</div>

<!-- 商品展示区 -->
<section class="product-section">
    <div class="product-item">
        <div class="product-text">
            <h3>灵越 燃7000系列</h3>
            <p>酷睿双核处理器i5-8250U 8GB内存</p>
            <p>英特尔PCle SSD256G共享显存</p>
            <p>价格: ¥4999.00</p>
            <button>查看详情</button>
        </div>
        <img src="img/f1/computer1.png" alt="灵越 燃7000">
    </div>
    <div class="product-item">
        <div class="product-text">
            <h3>颜值 框不住</h3>
            <p>酷睿双核处理器i5-8250U 8GB内存</p>
            <p>英特尔PCle SSD256G共享显存</p>
            <p>价格: ¥6888.00</p>
            <button>查看详情</button>
        </div>
        <img src="img/f1/computer2.png" alt="另一款电脑">
    </div>
</section>

<!-- 更多商品展示区 -->
<div class="f2">
    <div class="left">
        <div class="tit">
            <img src="img/f1/icon.png">
            <span>电脑,办公/1F</span>
        </div>
        <div class="text">
            <p>电脑整机</p>
            <ul>
                <li><a href="#">笔记本</a></li>
                <li><a href="#">游戏机</a></li>
                <li><a href="#">台式机</a></li>
                <li><a href="#">一体机</a></li>
                <li><a href="#">服务器</a></li>
                <li><a href="#">联想</a></li>
            </ul>
            <p>电脑配件</p>
            <ul>
                <li><a href="#">CPU</a></li>
                <li><a href="#">SSD硬盘</a></li>
                <li><a href="#">显示器</a></li>
                <li><a href="#">显卡</a></li>
                <li><a href="#">组装电脑</a></li>
                <li><a href="#">机箱</a></li>
            </ul>
            <p>外设/游戏</p>
            <ul>
                <li><a href="#">键盘</a></li>
                <li><a href="#">鼠标</a></li>
                <li><a href="#">U盘</a></li>
                <li><a href="#">移动硬盘</a></li>
                <li><a href="#">游戏设备</a></li>
                <li><a href="#">智能单车</a></li>
            </ul>
        </div>
    </div>


    <div class="card">
        <img src="img/f1/computer3.png" class="scale">
        <div class="text">
            <div class="p_intro">
                戴尔(DELL)XPS13-9360-R1609 13.3英
                寸微边框笔记本电脑
            </div>
            <div class="p_price">￥4600.00</div>
            <a href="#">查看详情</a>
        </div>
    </div>
    <div class="card">
        <img src="img/f1/computer4.png" class="scale">
        <div class="text">
            <div class="p_intro">
                戴尔(DELL)XPS13-9360-R1609 13.3英
                寸微边框笔记本电脑
            </div>
            <div class="p_price">￥4600.00</div>
            <a href="#">查看详情</a>
        </div>
    </div>
    <div class="card card3">
        <img src="img/f1/computer5.png" class="scale">
        <div class="text">
            <div class="p_intro">
                戴尔(DELL)XPS13-9360-R1609 13.3英
                寸微边框笔记本电脑
            </div>
            <div class="p_price">￥4600.00</div>
            <a href="#">查看详情</a>
        </div>
    </div>
</div>

<!-- 底部功能图标区域 -->
<div class="bottom-features">
    <div class="feature-item">
        <img src="img/service/icon1.png" alt="品质保障图标">
        <p>品质保障</p>
    </div>
    <div class="feature-item">
        <img src="img/service/icon2.png" alt="私人定制图标">
        <p>私人定制</p>
    </div>
    <div class="feature-item">
        <img src="img/service/icon3.png" alt="学员特供图标">
        <p>学员特供</p>
    </div>
    <div class="feature-item">
        <img src="img/service/icon4.png" alt="专属特权图标">
        <p>专属特权</p>
    </div>
</div>

<!-- 底部版权信息区域 -->
<footer>
    <div class="logo-area">
        <img src="img/footer/logo.png" alt="Tedu.cn">
        <p>高端的品味和环保的特质，优质 便捷，只为你专属订制。伴你走过每寸时光。</p>
    </div>
    <div class="centerlist-area">
        <table>
            <tr>
                <th>买家帮助</th>
                <th>商家帮助</th>
                <th>关于我们</th>
            </tr>
            <tr>
                <td>新手指南</td>
                <td>商家入驻</td>
                <td>关于达内</td>
            </tr>
            <tr>
                <td>服务保障</td>
                <td>商家后台</td>
                <td>联系我们</td>
            </tr>
            <tr>
                <td>常见问题</td>
                <td></td>
                <td></td>
            </tr>
        </table>
    </div>
    <div class="right-area">
        <div class="app-download">
            <p>学习商城客户端</p>
            <img src="img/footer/android.png" alt="Google Play下载图标">
            <img src="img/footer/ios.png" alt="App Store下载图标">
        </div>
        <div class="qrcode">
            <img src="img/footer/erweima.png" alt="二维码图标">
        </div>
    </div>
    <p class="copyright">©2017 达内集团有限公司 版权所有 京ICPxxxxxxxxxx</p>
</footer>
</body>

</html>
</body>
</html>